<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
			#box1{
<!--				border: solid red 1px;-->
				position:absolute;
				top:5%;
				left:5%;
				width:500px;
				height:400px;
			}
			#box2{
				border:   1px;
				position:absolute;
				top:5%;
				left:calc(35% - 25px);
				width:500px;
				height:400px;
			}
			#box3{
				border:   1px;
				position:absolute;
				top:5%;
				right:5%;
				width:500px;
				height:400px;
			}
			#box4{
				border:  1px;
				position:absolute;
				top:60%;
				left:5%;
				width:500px;
				height:400px;
			}
			#box5{
				border:   1px;
				position:absolute;
				top:60%;
				left:35%;
				width:500px;
				height:400px;
			}
			#box6{
				border:   1px;
				position:absolute;
				top:60%;
				right:5%;
				width:600px;
				height:400px;
			}

		</style>
    <script src="../static/js/echarts.min.js"></script>
	<!--    3d图形必须要导入这个库，否则不显示图形	-->
	<!-- 引入 echarts-gl 库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
	<!--     导入词云组件	-->
	<script src="../static/js/echarts-wordcloud-2.1.0/dist/echarts-wordcloud.min.js"></script>
</head>
<body>
<!-- 返回按钮 -->
    <button id="back-home" style="position: fixed; top: 20px; left: 10px;
                         padding: 10px 10px;
                         background-color: #4CAF50;
                         color: white;
                         border: none;
                         border-radius: 5px;
                         cursor: pointer;
                         z-index: 1000;">
        返回首页
    </button>

<div id="box">
			<div id="box1"></div>
			<div id="box2"></div>
			<div id="box3"></div>
			<div id="box4"></div>
			<div id="box5"></div>
			<div id="box6"></div>
		</div>
<!--   js代码	-->
	<script>
		//	todo 点击按钮返回首页
		document.getElementById('back-home').addEventListener('click',function(){
			window.location.href='/';
		});

	//	 图1：饼图
		//	初始化echarts
		var mychart1=echarts.init(document.getElementById("box1"));
		//	数据源 flask的写法，引入python的data1变量
		var data1={{data1|tojson|safe}};
		//	创建空数组存储图形需要的数据
		var dict_data1=[];
		//	这里的key是数组里面的索引(0,1,3......)
		for(var key in data1){
			dict_data1.push(data1[key]);
		};
		//	检查数据
<!--		console.log(value_data);-->
		//	图形的设置
		option = {
  title: {
    text: '每个城市演唱会次数Top10',
    left: 'center',
	  top:30
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '60%',
		 center: ['50%', '60%'],
      data: dict_data1,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

		//	展示图形1
		mychart1.setOption(option);

		//	 图2：折线图
		//	初始化echarts
		var mychart2=echarts.init(document.getElementById("box2"));
		//	数据源 flask的写法，引入python的data1变量
		var data2={{data2|tojson|safe}};
		//	创建空数组存储图形需要的数据
		var x_data2=[];
		var max_data2=[];
		var min_data2=[];
		//	这里的key是数组里面的索引(0,1,3......)
		for(var key in data2){
			x_data2.push(data2[key]['x']);
			max_data2.push(data2[key]['y']);
			min_data2.push(data2[key]['z']);
		};
		//	检查数据
<!--		console.log(value_data);-->
		//	图形的设置
		 option = {
        title: {
            text: '各城市最高价格和最低价格对比图',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['最高价格', '最低价格'],
            bottom: 0  // 图例放在底部
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',  // 为x轴标签留出空间
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: x_data2,
            axisLabel: {
                interval: 0,  // 强制显示所有标签
                rotate: 30,   // 标签旋转30度防止重叠
                textStyle: {
                    fontSize: 10  // 调整字体大小
                }
            }
        },
        yAxis: {
            type: 'value',
            name: '价格(元)'
        },
        series: [
            {
                name: '最高价格',
                data: max_data2,
                type: 'line',
                itemStyle: {
                    color: '#c23531'  // 红色线条
                },
                lineStyle: {
                    width: 3
                }
            },
            {
                name: '最低价格',
                data: min_data2,
                type: 'line',
                itemStyle: {
                    color: '#2f4554'  // 深蓝色线条
                },
                lineStyle: {
                    width: 3
                }
            }
        ]
    };

//	展示图形2
		mychart2.setOption(option);


		//	 图3：词云图
		//	初始化echarts
		var mychart3=echarts.init(document.getElementById("box3"));
		//	数据源 flask的写法，引入python的data1变量
		var data3={{data3|tojson|safe}};
		//	检查数据
<!--		console.log(value_data);-->
		 var option = {
        	title:{
						text:'演唱会明星场次词云图',
						left:'center',
						top:5
					},
            series: [{
                type: 'wordCloud',
                shape: 'circle',
                gridSize: 30,
                sizeRange: [20, 70], // 字体大小范围
                 rotationRange: [-30, 30], // 减小旋转幅度
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255)
                            ].join(',') + ')';
                        }
                    }
                },
                data: data3
            }]
        };

//	展示图形3
		mychart3.setOption(option);

		//	 图4：柱状图
		//	初始化echarts
		var mychart4=echarts.init(document.getElementById("box4"));
		//	数据源 flask的写法，引入python的data1变量
		var data4={{data4|tojson|safe}};
		//	检查数据
<!--		console.log(value_data);-->
	//	todo 拿到数据
		var x_data4=[];
		var y_data4=[];
		for(var key in data4){
			x_data4.push(data4[key]['name']);
			y_data4.push(data4[key]['value'])
		};

		 var option={
			 //	标题的设置
			title:[
				//	第一个
				{
					text:"个人价格最高的明星Top10",
					left:"center",
					top:10
				}
			],
			 xAxis: {
				 type: 'category',
				 data: x_data4,
				 axisLabel:{
					 interval:0,	//	显示所有标签
					 rotate: 45,  // 标签旋转45度（防重叠）
    				 fontSize: 12 // 调整字体大小
				 }
  				},
			  yAxis: {
				type: 'value'
			  },
			  series: [
				{
				  data: y_data4,
				  type: 'bar'
				}
			  ]
		};

//	展示图形4
		mychart4.setOption(option);



			//	 图5：环形图
		//	初始化echarts
		var mychart5=echarts.init(document.getElementById("box5"));
		//	数据源 flask的写法，引入python的data1变量
		var data5={{data5|tojson|safe}};
		option = {
			 title: {
            text: '平均门票价格最低的10个城市',
            left: 'center',
            top: 10,
            textStyle: {
                fontSize: 16,
                fontWeight: 'bold'
            }
        },
   tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}元 ({d}%)'  // 显示占比
        },
  legend: {
    top: '15%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
		 center: ['50%', '65%'],  // 调整位置
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: data5
    }
  ]
};

		//	展示图形5
		mychart5.setOption(option);

		//	 图6：玫瑰图
		//	初始化echarts
		var mychart6=echarts.init(document.getElementById("box6"));
		//	数据源 flask的写法，引入python的data1变量
		var data6={{data6|tojson|safe}};
		option = {
			 title: {
            text: '平均门票价格最高的10个城市',
            left: 'center',
            top: 0,
            textStyle: {
                fontSize: 16,
                fontWeight: 'bold'
            }
        },
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {

      type: 'pie',
      radius: [50, 200],
      center: ['50%', '60%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: data6
    }
  ]
};

		//	展示图形5
		mychart6.setOption(option);












	</script>
</body>
</html>